<template>
	<view class="box">
		<view class="item" @click="goToUrl('/pages/products/productDetail05')">
			<view class="image">
				<text class="hot-icon">
					热销产品
				</text>
				<u--image :showLoading="true" mode="aspectFit"
					src="https://gitee.com/XM1126/chunqing-miniprogram/raw/281848ceb86965f800858d691d427705e77f994b/static/products/%E5%A3%81%E6%8C%82%E7%82%89.png"
					width="340rpx" height="340rpx"></u--image>
			</view>
			<view class="content">
				<u--text text="全预混冷凝式甲醇采暖炉"></u--text>

				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="4185" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<u--text text="起" color="#767676" size=12 margin="0 0 0 10rpx"></u--text>
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="item" @click="goToUrl('/pages/products/productDetail06')">
			<view class="image">
				<u--image :showLoading="true" mode="aspectFit"
					src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/cainuanlu.jpg"
					width="340rpx" height="340rpx"></u--image>
			</view>
			<view class="content">
				<u--text text="高端采暖炉"></u--text>
				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="4200" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="item" @click="goToUrl('/pages/products/productDetail')">
			<u--image mode="aspectFit" :showLoading="true"
				src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/%E7%83%AD%E9%A3%8E%E7%82%89.png"
				width="340rpx" height="340rpx"></u--image>
			<view class="content">
				<text>农业温室大棚热风炉</text>
				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>

		<view class="item" @click="goToUrl('/pages/products/productDetail02')">
			<u--image mode="aspectFit" :showLoading="true"
				src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/%E9%87%87%E6%9A%96%E7%82%89.png"
				width="340rpx" height="340rpx"></u--image>
			<view class="content">
				<text>甲醇采暖炉</text>
				<!-- <text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>

		<view class="item">
			<u--image :showLoading="true" mode="aspectFit"
				src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/menghuozao.png" width="340rpx"
				height="340rpx"></u--image>
			<view class="content">
				<u--text text="甲醇猛火灶"></u--text>
				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="item">
			<u--image :showLoading="true" mode="aspectFit"
				src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/danzao.png" width="340rpx"
				height="340rpx"></u--image>
			<view class="content">
				<u--text text="甲醇单灶"></u--text>
				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="item">
			<u--image :showLoading="true" mode="aspectFit"
				src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/shuangzao.png" width="340rpx"
				height="340rpx"></u--image>
			<view class="content">
				<u--text text="甲醇双灶"></u--text>
				<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
				<view class="bottom">
					<u--text text="￥" color="#F21E46"></u--text>
					<u--text text="888" color="#F21E46" size=26 lineHeight="1em"></u--text>
					<!-- <u--text text="积分666" color="#767676" size=12 margin="0 0 0 10rpx"></u--text> -->
					<!-- <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
			</view>
		</view>

	</view>
</template>
<script >


</script>
<style lang="scss" scoped>
::v-deep text {
	white-space: normal !important;
}

.box {
	background-color: #F4F5F7;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row;
	align-content: flex-start;
	padding: 0 20rpx;
}

.item {
	width: 700rpx;
	background-color: white;
	border-radius: 10px;
	margin-bottom: 20rpx;
	@include flex-center(row, flex-start, center);

	.item {
		position: relative;
	}

	.hot-icon {
		background-color: #F21E46;
		color: #fff;
		font-size: 24rpx;
		border-radius: 0 40rpx 40rpx 0;
		padding: 10rpx;
		position: absolute;
		z-index: 1000;
	}
}

.content {
	padding: 10rpx 20rpx;

	.bottom {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;

		::v-deep .u-text__value {
			white-space: nowrap !important;
			align-self: flex-end;
		}

		::v-deep .u-text {
			flex: 0;
		}

		::v-deep .u-icon {
			margin-left: auto;
		}
	}
}
</style>
